<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

		<title>Yet Another Monitor</title>
		<meta name="description" content="Internet Usage Statistics" />
		<link rel="stylesheet" type="text/css" href="./yamon.css"/>
		<!--[if IE]>
			<link rel='stylesheet' type='text/css' href='./msie.css'>
		<![endif]-->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script type="text/javascript" src="./yamon.js"></script>
		<script type="text/javascript" src="./config.js"></script>
		<script type="text/javascript">
			google.load('visualization', '1.0', {'packages': ['corechart']});
		</script>
	</head>
	<body>
	<noscript class='alert'>This web application makes extensive use of JavaScript.  You must either enable JavaScript in your current browswer or upgrade to a JavaScript capable browser.</noscript>
		<div id="wrapper">
			<div id="pageContent" class="leftAlign">
				<div id="PageHeader" >
					<h1>Yet Another Monitor (v1.0.12)</h1>
					<p id='p-timer' class='float-right'>Refreshing in:&nbsp;<span class="RefreshInterval">120</span> sec.
						<button type="button" id="StartPause">Pause</button>
						<button type="button" id="Reset">Reset</button>
						<button type="button" id="Refresh">Refresh Now</button>
						<br/>
						<a href='/'>Router GUI</a><br/>
					</p>
				</div>
				 <p id='error-notification'>Uh oh... something bad has occurred in the JavaScript... if things were running properly, this text would have been deleted.  Please contact Al and let him know you're experiencing a problem.</p>
				<div id="SECTION_ONE" class="primaryRow">
					<p class='tabs'>
						<span id='summary-tab' class='tab-name'>Summary</span>
						<span  id='settings-tab' class='tab-name not-selected'>Settings</span>
						<span  id='changes-tab' class='tab-name not-selected'>Changes</span>
						<span  id='to-do' class='tab-name not-selected'>To Do List</span>
						<span  id='credits' class='tab-name not-selected'>Credits</span>
					</p>
					<div class='tabs-sections'>
						<div class='intro summary-tab hidden'><h1>Welcome to the `<i>Yet Another Monitor</i>` reports...</h1>
							<p>The good news is that you've gotten to this page so presumably you've gotten everything installed properly.  Only a few things left to do before you can see your bandwidth utilization reports!</p>
							<p>In particular, you *must* specify a number of parameters on the `Settings` tab - including:</p>
							<ol>
								<li>the day of the month on which your ISP billing cycle starts.  If you do not have a billing cycle then enter any date that you want (*)<br/>
								<li>whether you have unlimited bandwidth or a monthly usage allowance.  This value must be specified in GB...
								<li>the path to the data files on your web server (*), and
								<li>the name of the users (or devices) and the usage data files created by the `jamon.sh` script (*).
								<li>There are a variety of other options but those are all optional.
							</ol>
							<p><b>Note</b> - (*) these values <u>must</u> match the parameters specifed in the configuration file `<a href='data/config.file' target='_blank'>confile.file</a>` for the `jamon.sh` script (otherwise you'll get error messages and/or incorrect results in the reports)!</p>
							<p>Please review the default settings below - all required fields are prefaced with <span class='required'></span> and those that which need to be confirmed will have a green checkmark following (<span class='mval'> &#x2714; </span>).  Click to accept the pre-defined default or set it to your preferred value (and then click).  Once all of the checkmarks have been cleared, reload the page</p>
							<p>The good news is that your setting are stored permanently so you'll only have to do this once.  The unfortunate news is that your settings are saved using a new HTML feature called `localStorage` - meaning that they are retained on *this* computer in *this* browser.  If you want to view the reports in on a different browser/computer/device, you'll also have to confirm these settings on that machine too... sorry, but that's the way `localStorage` works.</p>
							<h2>Default Settings:</h2>
						</div>
						<div id="summary-tab-section" class="summary-tab leftAlign">
							<div id="UsageGraph" class="graphObject"></div>
							<div id='changes-legend' class='a-l cf'>
								<p><b><u>Changes Legend</u></b>:</p>
								<p class='changed c0'>bytes</p>
								<p class='changed c1'>kilobytes</p>
								<p class='changed c2'>megabytes</p>
								<p class='changed c3'>gigabytes</p>
								<p class='changed c4'>terabytes</p>
								<p class='changed c5'>petabytes</p>
								<p class='changed'>all others</p>
							</div>
							<p>Reporting Interval:&nbsp;<span class='current-interval imp-text'></span></p>
							<p>Reporting Data for:&nbsp;<span class='current-date imp-text'></span></p>
							<p>All Bandwidth is&nbsp;<span id="spBandwidth">still loading...</span>  <span class='change-units'>[ &rarr; <a class='hidden'>MBytes</a> <a class='hidden'>Auto</a> ]</span></p>
							<p>Internet Usage Cap:&nbsp;<span id="spUsageCap" class='imp-text'>Not Set... see 'Settings' tab</span></p>
							<p>ISP Billing Reset Date:&nbsp;<span id="spResetDay" class='reset_day imp-text'>???</span>&nbsp;of every month
							</p>
							<table class='cf' id="SystemTotalsTable">
								<thead>
									<tr>
										<th class='br'>Interval</th><th>Downloaded</th><th class='br'>Uploaded</th><th class='br'>Total</th><th class='is-cap br'>Cap</th><th class='is-cap br'>% of Cap</th><th class='is-cap a-c'>Projected<br/>Total</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
							<span id="add-history" title="Add another interval">[ + ]</span>
						</div>
						<div id="settings-tab-section" class="summary-tab hidden">
							<h3>You must specify and/or confirm the value for all <span class=' required'> required</span> fields.  The others are optional (or you can accept the defaults).</h3>
								<div id='settings-col_1'>
									<p id='p-reset_day'>
										<label for='reset_day' title='The day of the month on which your ISP bill starts' class='required'>ISP Billing Date</label>:<input type=text id='reset_day' name='reset_day' size=3 class='linked'> of the month
									</p>
									<p id='p-bw_cap'>
										<label title='What your ISP allows you to use each month (in GB)' class='required'>Bandwidth</label>:<br/>
										<label for='bandwidth-u'><input type=radio id='bandwidth-u' name="bandwidth" value="unlimited">Unlimited</label>
										<input type=radio id='bandwidth-l' name="bandwidth" value="limited"><input type=text id='bw_cap' name='bw_cap' class='a-r' size=3> GB/mo
									</p>
									<p>
										<label for="DisplayUnits">Units:</label>
										<select name="DisplayUnits" id="DisplayUnits">
											<option value="auto">Automatic</option>
											<option value="0">Bytes</option>
											<option value="1">Kilobytes</option>
											<option value="2">Megabytes</option>
											<option value="3">Gigabytes</option>
											<option value="4">Terabytes</option>
											<option value="5">Petabytes</option>
										</select>
									</p>
									<p>
										<label for="DisplayBase">Display Base:</label>
										<select name="DisplayBase" id="DisplayBase">
											<option value="1000">1000</option>
											<option value="1024">1024</option>
										</select>
									</p>
								   <p>
										<label for="NumDecimals">Display Decimals:</label>
										<select name="NumDecimals" id="NumDecimals">
											<option value="0">0</option>
											<option value="1">1</option>
											<option value="2">2</option>
										</select>
									</p>
									<p>
										<input type="checkbox" id="ShowZeroes">
										<label for="ShowZeroes">Show Zero Bandwidth</label>
									</p>
									<p>
										<input type="checkbox" id="ShowDevices" checked />
										<label for="ShowDevices">Show Devices</label>
										<br />
									</p>
								</div>
								<div id='settings-col_2'>
									<p id='p-dataPath'>
										<label for="dataPath" class='required'>Path to Data</label>:
										<input type="text" name="dataPath" id="dataPath" value="./data"/>
									</p>
									<p id='p-devicefile'>
										<label for="devicefile" class='required'>Users & Devices</label>
										<input type="text" name="devicefile" id="devicefile" value="users.html"/>
									</p>
									<p id='p-usagefile'>
										<label for="usagefile" class='required'>Usage</label>:
										<input type="text" name="usagefile" id="usagefile" value="mac_data.html"/>
									</p>
									<p>
										<input type="checkbox" id="showHourly">
										<label for="showHourly" checked>Show Hourly Graph</label>
									</p>
									 <p class='showHourly hidden'>
										<label for="hourFileName" title='Name of your hourly data file (as entered in `config.file`)'>File name:</label>
										<input type="text" name="hourFileName" id="hourFileName" class='' value="hourly_data.html" placeholder="Hourly data file name"/>
									</p>
									<p>
										<input type="checkbox" id="showLive">
										<label for="showLive" checked>Show Live Data</label>
									</p>
									 <p class='showLive hidden'>
										<label for="liveFileName" title='Name of your live data file (as entered in `config.file`)'>File name:</label>
										<input type="text" name="liveFileName" id="liveFileName" class='' value="live_data.html" placeholder="Live data file name"/>
									</p>
								</div>
								<div id='settings-col_3'>
									<p>
										<input type="checkbox" id="showISP">
										<label for="showISP" checked>Show ISP Columns</label>
									</p>
									 <p class='showISP'>
										<label for="isp-name" title='Name of your ISP (e.g., Rogers, Verizon)... for display only'>ISP:</label>
										<input type="text" name="isp-name" id="isp-name" class='linked' value="" placeholder="ISP Name"/>
									</p>
									 <p class='showISP'>
										<label for="isp-name" title='URL to ISP usage report'>ISP usage report:</label>
										<input type="text" name="isp-url" id="isp-url" class='linkedURL' value="" placeholder="URL to report"/>
									</p>
									<p><a class='showISP isp-url' href='' target='_blank'>Link</a></p>
									<p>
										<label for="RefreshInterval">Refresh Interval:</label>
										<input type="text" size="2" name="Refresh" id="RefreshInterval" class='linked' value="120"/> sec.
									</p>
							   </div>
							   <button onclick="settings('export')">Export Settings</button>
							   <button onclick="settings('import')">Import Settings</button>
							   <button onclick="settings('reset')">Reset Settings</button>
							<h3 class='clearfix hidden' id='missing-txt'></h3>
						</div>
						<div id="changes-tab-section" class="summary-tab hidden">
							<div class='changes'>2013-10-06 -- Yet Another Monitor v1.0.12 by <b>Al C</b><span class='expand hidden'>[ + ]</span>
								<ul>
								<p>Version 1.0.12 -- Incorporating "whitebeard's" changes to ensure that colours are consistent between all graphs.  
									<li>`users.file` allows for an optional 5th parameter to set the colour for the device
									<li>added internal logic, etc. so that if some entries in `user.html` have pre-set colours, those are used in the charts; otherwise, colours are selected from an array (based upon an internally defined `id` for each device)
									<li>Also added a `Reset Settings` button on the `Settings` tab. If you click this button it will erase all of YAMon's localStorage variables...yes, I did really test this new feature. It allowed me to confirm that the export, reset and import features all work... (fortunately, they did :-)
								</ul>
							</div>
							<div class='changes'>2013-09-30 -- Yet Another Monitor v1.0.11 by <b>Al C</b><span class='expand'>[ + ]</span>
								<ul class='hidden'>
								<p>Version 1.0.11B -- more changes relating to incorporating the traff daemon results (see 11A below).  
									<li>regex's in yamon.js is updated to better parse the traff data
									<li>added Traff data to the Monthly Breakdown tab... <br/>
									- columns in the table for daily daemon values and differences and cummulative results<br/>
									- additional lines/columns in the charts showing daily, differences and cummulative results, etc.
								</ul>
								<ul class='hidden'>
								<p>Version 1.0.11A -- virtually all changes relating to incorporating the traff daemon results.  Version A because not everything listed below is done:
									<li>config.file was updated [yet again] to include the `_traff_daemon` parameters (if this value is set to `1`, you must also enable the `traf daemon` on your router (Admin UI-->Services-->Services)).
									<li>if _traff_daemon is set to 1, yamon.sh reads the traff daemon usage results and adds them them to the mac_usage file (under MAC address `FF:FF:FF:FF:FF:FF` and IP address 1.1.1.1... currently those values are hard coded into the code) 
									<li>yamon.js is updated to include the traff results at the bottom of the tables on the Daily, Monthly and Monthly Breakdown tabs.  I also include the difference between what YAMon and the traff daemon recorded (but recognize that YAMon is rounding data to the nearest byte while the daemon rounds to the nearest MB... so this could account for a large portion of any discrepancies between the two values)
									<li>Not completed yet... There is so much that could be added on the Monthly Breakdown tab... <br/>
									- columns in the table for daily daemon values and differences and cummulative results<br/>
									- additional lines/columns in the charts showing daily, differences and cummulative results, etc.
									<li>I've commented out the `ps` code in yamon.sh because the call seems to be very much dependent upon the version of the firmware and was producing false error messages in the logs.
								</ul>
							</div>							
							<div class='changes'>2013-09-22 -- Yet Another Monitor v1.0.10 by <b>Al C</b><span class='expand'>[ + ]</span>
								<ul class='hidden'>
								<p>Version 1.0.10 -- numerous changes in yamon.sh, config.file and some updates in yamon.js:
									<li>yamon.sh now copies the report files from the `Setup` folder to the web server (so you can remove those statements from your yamon.startup script)!  I added more error reporting in the logs if the copy process fails.  I also added info in the logs reporting if two (or more) instances of yamon.sh are running (yeah... I know that is not supposed to be possible but I've managed to get into that situation more times than I care to count).  NB - if you're logging at level 0, you'll see the message `>>> Number of YAMon instances: 2.`... this is <u>not</u> an error condition (there are two instances because it counts the script *and* the procedure that counts the number processes (because that process was spawned by the script... Just accept it... that's the way that Bash/shell scripts work)   
									<li>config.file was updated to include several more parameters (i.e., there are now two separate entries for path to the web server and to the data directory).
									<li>yamon.sh now creates (and saves to the web folder) a file named `config.js`.  This file contains a summary of the key reporting values.  yamon.js checks to see whether the values in config.js differ from what is saved on the `Settings` tab and if it finds discrepancies, an alert is displayed  (config.js is automatically re-saved to the web directory whenever config.file is changed)
									<li>I also added the projected monthly total usage in the Summary table at the top of the page.  I used a very simplistic formula for this... I calculated the bits per second for the usage up-to the current reporting time and then multiplied that by the total number of seconds in the reporting interval.  If the total exceeds the monthly cap, the cell is highlighted with a red background.
									<li>yamon.html now has a link in the summary tab that allows you to quickly change between auto display and MBytes.
								</ul>
							</div>							
							<div class='changes'>2013-09-02 -- Yet Another Monitor v1.0.9 by <b>Al C</b><span class='expand'>[ + ]</span>
							<ul class='hidden'>
							<p>Version 1.0.9 -- all changes related to bug fixes in the reports:
								<li>Not a lot of exciting changes in this version... sorry!
								<li>FIXED: a number of sorting and date issues (in particular, relating to Safari and Chrome)
							</ul>
							</div>							
							<div class='changes'>2013-08-02 -- Yet Another Monitor v1.0.8 by <b>Al C</b><span class='expand'>[ + ]</span>
							<ul class='hidden'>
							<p>New features & Bug fixes in version 1.0.8 -- all changes (except these notes) in yamon.sh & config.file:
								<li>NEW: added yet another parameter - _tarBUs - in `config.file`... if this parameter is set to one (default is zero) and daily backups are enabled, then the backup files will be compressed into a single archive in the backups directory named `bu-&lt;date&gt;.tar.gz`
								<li>NEW: if the paths for `_logDir` or `_dailyBUPath` start with a slash - e.g., `_logDir='/mnt/alternate_logdir/'` - then that will be treated as an absolute path (and the value of `_baseDir` will be ignored)
								<li>FIXED: date issues with the monthly rollover and ISP billing cycle change that were clobbering the usage files
							</ul>
							</div>
							<div class='changes'>2013-07-27 -- Yet Another Monitor v1.0.7B by <b>Al C</b><span class='expand'>[ + ]</span>

							<ul class='hidden'>
							<p>New features & Bug fixes in version 1.0.7B (replaces version 1.0.7):
								<li>[re]fixed the Hourly and daily charts overlap issue (in yamon.html, yamon.cs & yamon.js)
								<li>Fixed the integer overflow issue (in yamon.sh & config.file)
								<li>also, improved the behaviour of the next/previous day buttons so that you can no longer go past the start/end dates of the interval
								<li>also, improved the behaviour of the add history button so that you can now include data files from last year (previously it gagged badly when trying to add Dec 2012 which prevented any earlier months from getting added as well)
							</ul>
							</div>
							<div class='changes'>2013-07-25 -- Yet Another Monitor v1.0.6 by <b>Al C</b><span class='expand'>[ + ]</span>

							<ul class='hidden'>
							<p>New features & Bug fixes in version 1.0.6:
								<li>Added optional hourly graph in web UI (see `Settings` tab and `Daily Usage` tab) & config.file; added placeholders for live data reports (but haven't built that yet)
								<li>Moved `Changes Legend` to the Summary tab (and hide unused items)
								<li>Some tweaks to formatting in tables & charts on the Monthly Breakdown tab
								<li>re-fixed data summing method in yamon.sh to prevent integer overflow
								<li>updated regex for IP matching (to prevent 192.168.6.12 from also matching 192.168.6.12x)... have opted to go with a simple fix for the timebeing... might have to further tighten up this regex if it doesn't work in all cases
							</ul>
							</div>
							<div class='changes'>2013-07-18 -- Yet Another Monitor v1.0.5 by <b>Al C</b><span class='expand'>[ + ]</span>

							<ul class='hidden'>
							<p>Bug fixes in version 1.0.5:
								<li>Integer overflow on some routers if downloads exceed 2GB
								<li>A number of UI fixes relating to corrections.
							</ul>
							</div>
							<div class='changes'>2013-07-17 -- Yet Another Monitor v1.0.4 by <b>Al C</b><span class='expand'>[ + ]</span>

							<ul class='hidden'>
							<p>Bug fixes in version 1.0.4:
								<li>Sort Devices by user name and device name (lowercase alphabetic order) in the monthly and devices reports.  I have always sorted the entries in my users.file but apparently not all people have done this. Unsorted lists produced goofy results in the reports. This is now fixed
								<li>Strip non-alphanumeric characters out of usernames... but only for internal usage purposes.  Special characters in user names are problematic because they can cause JavaScript errors when dynamically adding onclick calls.  Also fixed.
							</ul>
							</div>
							<div class='changes'>2013-07-14 -- Yet Another Monitor v1.0.3 by <b>Al C</b><span class='expand'>[ + ]</span>

							<ul class='hidden'>
							<p>Three new features in version 1.0.3:
								<li>In `config.file`, I've added a new entry `_loglevel` and within `yamon.sh` calls to `send2log` now have two parameters - first, the message to send to the log; and second, the importance of the message.  There are three permitted values 0==>All messages; 1==>Most; and, 2==>Just serious.  The default _loglevel is '1', meaning that all calls to `send2log` with an importance of 1 or 2 will get written the log... this means that the logs are *much* smaller (and presumably there is less load on the server).
								<li>In the reports, I've added the ability to correct the usage for a particular day.  On the `Daily Usage` tab, you'll see an `Add Correction` button that will show a new row at the bottom of the table.  In this row you can enter a brief description for the correction and then the download & upload correction (in MB).  At the bottom of the `Monthly Usage` report, there is a row for the total corrections in the given month.  In the `Monthly Breakdown` report, any date which has a correction is prefaced by a red checkmark (<span class='corrected'></span>) and if you hover over the date, the title tag displays the reason and the size of the correction(s).  The corrections are not attributed to any particular user/device; they go into their own category and will be displayed in the pie charts as a separate segment. <br/>The reason that I added this feature was that on a couple of occasions, while testing features and/or debugging, I've forgotten to restart my script for an extended period of time... this allows me to make sure that my monthly figures are consistent with what the router (and my ISP) are also reporting.  I pick my correction factors by comparing what YAMon reported with what is displayed on the Status-->WAN tab (my YAMon figures are typically slightly lower than what the Status-->WAN tab shows).  I suppose I could prorate things between the users for that day but it's not that important to me...
								<li>Last but not least, I've added feature that allows you to import/export the settings (and all values that are stored in localStorage) between browsers and computers.  On the `Settings` tab, you'll find two buttons to export and import the values.  Click the `Export Settings` button and you'll get a dialog with the contents of localStorage in an encoded string.  Copy that text and save it on a USB key or send it to yourself in an email.  Click the `Import Settings` button and you'll get a dialog with an empty text field into which you can paste the exported settings.  Click the `Import` button to complete the process (or `Cancel` to chicken out).  <br/>For more information about localStorage, see <a href='http://www.w3schools.com/html/html5_webstorage.asp' target='_blank'>HTML5 Web Storage</a>.
							</ul>
							</div>
							<div class='changes'>2013-07-08 -- Yet Another Monitor v1.0 by <b>Al C</b><span class='expand'>[ + ]</span>

							<ul class='hidden'>
								<li>Because I've made so many changes, I've arbitrarily renamed the script
								<li>The shell script itself has been virtually completely rewritten and now is driven by a single configuration file rather than 18 different command line parameters.  You can edit the configuration file (i.e., to turn logging on or off or alter the intervals between updates, etc.) and the script will detect the changes and update the monitoring parameters on the fly (i.e., without having to stop and restart the script).
								<li>The script now creates separate user and usage data files and publishes those to the web directory.  The usage file is date stamped so that it is easier to keep/display history information (rather than just the current months data).
								<li>There were significant changes to the way that the script manages creation and updates to the 'chain rules' which are essential to properly recording usage information.  The script now detects whether things have become corrupted and a) logs the discrepancy and b) attempts to undo the problem
								<li>Significantly more information is included in the optional data logs.
								<li>In addition to publishing data to the web server, the script will also optionally make daily backups of the data.
								<li>On the client side, the javascript code has also been virtually completely rewritten... first and foremost, it has to merge the user/usage data files but a lot of new features have been introduced as well.
								<li>There's a new introductory screen that (hopefully) allows new users to get their reports configured quickly; history allows you to review past totals and drill to view usage by day/user/device; the ISP checkbox allows you to compare usage recorded by the router with that reported by your ISP, etc.
							</ul>
							</div>
							<div class='changes'>2013-06-12 -- version v1.5.1 by <b>Al C</b><span class='expand'>[ + ]</span>

							<ul class='hidden'>
								<li>Several more changes...
								<li>The table on the Summary tab now includes a button [ + ] below the table that allows you to add history entries into the table.	 I've added a field on the Settings tab that allows you to enter the path to the history folder.  I've also added a line to the startup script that copies the history folder ('/opt/monitor/history/*') to '/tmp/www/history/*') and I've added a line in bw_monitor.sh that also copies the history file to the web folder (so that you don't have to copy it over manually after your reset day)
								<li>The date range in the table on the Summary tab is clickable... it will load the user_details.js for that month.
								<li>The currently loaded data set is highlighted in the table on the Summary tab with a red border and is prefaced by a red star
								<li>I've added buttons on the Daily Usage tab that load the first and last days of the current interval (in addition to the next/previous buttons
								<li>The timer/refresh buttons are disabled (and hidded) if the current data set is loaded from a history file rather than the live user_details.js file (it doesn't make sense to refresh if the data file is no longer changing... right)
								<li>I've also added a monthly comparison graph in the Summary tab that shows the uploads/downloads relative to the monthly allowance (if applicable)
							</ul>
							</div>
							<div class='changes'>2013-06-03 -- version v1.5 by <b>Al C</b><span class='expand'>[ + ]</span>
							<ul class='hidden'>
								<li>LOTS of changes... where to begin?!?
								<li>I've rewritten the reload functionality so that it does not completely refresh the page anymore... instead, I reread the javascript 'user_details.js' file and regenerate the tables and graphs accordingly.  This allows me to flag which items have changed within the tables... I further highlight the magnitude of the change with one or two asterisks (and increasingly dark text).  If you hover your mouse over any items with an asterisk, the number of bytes difference is displayed.  The asterisks only appear if you let the countdown timer get to zero (and only if there is any actual traffic on your router).  You maybe able to shorten the wait somewhat by clicking the 'Refresh Now' button.
								<li>I now 'lazy-load' the views - i.e., initially, I load the data for the 'Daily Usage' tab (because it is the default view) but I do not load the data for any of the other tabs until you actually click a tab.  This means that the page loads more quickly when you first open it but you may have to wait for a second or two when you open a new tab.  Once you've visited a tab, things will display more rapidly because I do not regenerate the data again (unless, of course, the javascript has been refreshed and the countdown timer gets to zero)
								<li>Your selected options on the Settings tab are now retained between sessions in 'localStorage' entries.  For those of you who do not know, localStorage is a new HTML 5 feature that essentially gives you cookies on steroids - values are easily saved and updated and are retained permanently (or until they are expressly removed or cleared).
								<li>While on the Settings tab, you'll [hopefully] notice a new 'Show ISP Columns' checkbox.  When you select this item, several additional columns and graphs are added to the 'Monthly Breakdown' table.
								<li>The 'Monthly Breakdown' tab now allows you to optionally record your upload & download usage (as reported by your ISP)... The cells in the ISP Uploaded and Downloaded columns contain input fields.  Simply select the cell and enter the appropriate value, all of the adjacent values and graphs are automagically updated (and these values are also saved to a localStorage entries so they will be reentered the next time you visit the page.<br/>
									<b>Note</b>: My ISP (Rogers) reports my usage in MB so that is what I've assumed for the units in these cells. Let me know if you want this changed.<nb>
									<b>Another Note</b>: LocalStorage is exactly that... the values are stored on the machine where they were entered.  If you go to a different machine (or even a different browser on the same computer), you will not have access to the values you've already entered.  Yup, it's a bummer but that's the way that localStorage  works.  It meant that I didn't have to create a database and/or create PHP files on a separate database server.  There are actually ways to transfer the localStorage values... let me know if this is going to be a big problem for you and I can send you a script.
								<li>Why did I add this ISP stuff?  I wanted to compare what my family was using with what Rogers was reporting... according to Rogers, we were going over our 70GB, then 80GB and now 100GB usage allowance but they could not provide me with any sort of assurance that their numbers could be trusted (or even verified).  Their numbers were considerably higher than what the default firmware on my router showed so I flashed my router with DD WRT and then started to adapt this UI to give me an easier way to compare things.  Now I can do that!<br/>
									There's an upload/download column graph for the ISP traffic similar to the existing report for the router  and I've added two column/line graphs for the differences between the two and the cummulative traffic.
							</ul>
							</div>
							<div class='changes'>2013-04-22 -- version v1.1 by <b>Al C</b><span class='expand'>[ + ]</span>
							<ul class='hidden'>
								<li><u>bw_monitor.sh</u> - modified to:
								<ul>
									<li class='strikeout'>include an optional 18th parameter for the usage cap
									<li>output the usage cap and the reset date to user_details.js
									<li><b>NB</b> - All (3) of my changes in bw_monitor.sh are preceded by '# AC - '

								</ul>
								<li><u>user_details.js</u> - modified to include usage cap and the reset date (as above)
								<li><u>Orionview-v1.1.html</u> - modified to:
								<ul>
									<li>display info in tabs rather than all sections all of the time
									<li>reduce the number of DOM elements (unnecessary DIVs elements)
									<li>display usage cap and reset date from user_details.js
									<li>change wording from 'Hosts' to 'Devices'
								</ul>
								<li><u>Orionview-v1.1.js</u> - modified to
								<ul>
									<li>support new tab display
									<li>tweak previous code
									<li>add 'change' listeners for all inputs so that tables/graphs are updated immediately when an input is changed
									<li>add 'links' from user names in 'Daily Usage' & 'Monthly Totals' tables to a filtered 'Monthly Breakdown'
									<li>add links from the dates in the 'Monthly Breakdown' table back to the 'Daily Usage' view;
								</ul>
								<li><u>Orionview-v1.1.css</u> - modified/added rules to support new visuals
								<li><u>msie.css</u> - added to make tabs display the same in MSIE as Firefox & Chrome
								<li><u>bw_monitor.startup</u> - modified to account for usage cap, new file(msie.css) and changed filenames<br/>
							</ul>
							</div>
							<p>2013-04-12 -- various tweaks & updates by <b>bpsmicro</b></p>
							<p>2013-01-25 -- Original version by <b>Orionshock</b></p>
						</div>
						<div id="to-do-section" class="summary-tab hidden">
							<ul>
								<li>add `live` stats (updated every 10 sec or so)... probably a table and perhaps a chart. This'll require changes to the yamon.sh script (to dump data every time it updates things)... presumably there'll have to be a flag in the config.file to turn this feature on/off.  I wonder how much additional load this'll add to the router CPU.
								<li>modify the web code so that you do not have to edit users.file when a new device is added to your network - i.e., the users.file (or users.html on the web server) will contain the MAC address and based upon that (or a hashcode of the MAC), lookup the friendly name for the user & device.  Retaining the user/device info in localStorage will be pretty simple to implement solution
								<li>add a last hour report - i.e., a rolling report for the past 60 minutes (in 5min intervals) showing uploads/downloads by user/device.  Again probably a table and chart
								<li>set this up as a google code project to improve version control
							</ul>
							<p>If you have any questions/suggestions or find an error, drop me a <a href="mailto:al.caughey@gmail.com?subject=Yet Another Monitor Questions%2FComments">line</a>.  I'll do my best to respond ASAP!</p>
						</div>
						<div id="credits-section" class="summary-tab hidden">
							<p>By: Al Caughey </p>
							<p>Version: Jul 4 2013</p>
							<p>Based upon: <a href='http://code.google.com/p/wrtbwmon/' target='_blank'>wrtbwmon</a> by Emmanuel Brucy &  <a href='http://code.google.com/p/lal-projects/' target='_blank'>bw_monitor</a> by FezJay<br/>And, adapted from modifications by: `bpsmicro`, `OrionShock` & others</p>
							<p>Thanks to `spanman` and everyone else who's made suggestion for improvements and/or found bugs</p>
							<p>If you have any questions/suggestions or find an error, drop me a <a href="mailto:al.caughey@gmail.com?subject=Yet Another Monitor Questions%2FComments">line</a>.  I'll do my best to respond ASAP!</p>
						</div>
					</div>
				</div>
				<div id="SECTION_TWO" class="primaryRow">
					<p id='data-tabs' class='tabs'>
						<span id='daily-tab' class='tab-name'>Daily Usage</span>
						<span  id='monthly-tab' class='tab-name not-selected'>Monthly Totals</span>
						<span  id='monthly-breakdown-tab' class='tab-name not-selected'>Monthly Breakdown</span>
						<span  id='devices-tab' class='tab-name not-selected'>Devices</span>
					</p>
					<div class='tabs-sections'>
					<div id="daily-tab-section" class="summary-tab">
							<div id="DailyGraph" class="graphObject"></div>
							<p>Current Day:&nbsp;
								<button type="button" id="fDBtn" title='Go to the first day of this interval'>|&lt;</button>
								<button type="button" class="pDBtn" title='Go to the previous day in this interval'>&lt;</button>

								<span id='current-date' class='current-date imp-text' title='Data for this data'></span>
								<button type="button" class="nDBtn" title='Go to the next day in this interval'>&gt;</button>
								<button type="button" id="lDBtn" title='Go to the last day of this interval'>&gt;|</button>&nbsp;&nbsp;&nbsp;
								<button type="button" class='go2today hidden' title="Click to return to today's date">Today</button>
							</p>
							<p>Click any name or device in the table below to see the usage breakdown by day.</p>
							<table class='cf' id='daily-usage-table'>
								<thead id="DailyUsageHeader">

									<tr>
										<th class='br'>Users / Devices</th><th>Downloaded</th><th class='br'>Uploaded</th><th class='br'>Total</th><th class='br'>Percent</th>
									</tr>
									<tr id='no-daily-data' class='hidden'>
										<td colspan=5>There is no data for the selected date!</th>
									</tr>
								</thead>
								<tbody id="DailyData"> </tbody>
								<tfoot>
									<tr id="correction-row" class='hidden'>
										<td class="a-r br"><input type="text" class="cf-desc" placeholder='Reason for correction'></td>
										<td class="cf-d a-r MBytes">
											<input type="text" value="0" name="cf-d">
										</td>
										<td class="cf-u a-r br MBytes">
											<input type="text" value="0" name="cf-u">
										</td>
										<td class="TotalBytes num a-r bytes" value="0">0</td>
										<td class="br a-c percent">-</td>
									</tr>
									<tr id="dailyFooter"></tr>
								</tfoot>
							</table>
							<p id='add-correction'><button onclick='addcorrection()'>Add correction</button>... use this feature if you've accidentally stopped the monitor or if things went haywire.</p>
							<p id='remove-correction' class='hidden'><button onclick='removecorrection()'>Remove correction</button>... click to delete this correction.</p>
							<div id="hourlyGraph" class="showHourly hidden graphObject">Hourly Data Graph</div>
							<p id='bnav'>
								<button type="button" id="bpDBtn" class='pDBtn' title='Go to the previous day in this interval'>&lt;</button>
								<button type="button" id="bnDBtn" class='nDBtn' title='Go to the next day in this interval'>&gt;</button>
								<button type="button" class='go2today hidden' title="Click to return to today's date">Today</button>
							<p>
					   </div>
						<div id="monthly-tab-section" class="summary-tab hidden">
							<div id="MonthlyGraph" class="graphObject"></div>
							<p>Monthly Usage Totals for: <span class='current-interval imp-text'></span></p>
							<p>Click any name or device in the table below to see the usage breakdown by day.</p>
							  <table id='monthly-totals-table'>
								<thead id="MonthlyHeader">
									<tr>
										<th class='br'>Users / Devices</th><th>Downloaded</th><th class='br'>Uploaded</th><th class='br'>Total</th><th class='br'>Percent</th>
									</tr>
								</thead>
								<tbody id="MonthlyData"></tbody>
								<tfoot>
									<tr id="mcorrection-row" class='hidden is_d'>
										<td class="a-r br">Corrections</td>
										<td class="cfv downloads num a-r">
										</td>
										<td class="cfv uploads num a-r br">
										</td>
										<td class="TotalBytes num a-r"></td>
										<td class="br a-c percent">-</td>
									</tr>
									<tr id="monthlyFooter"></tr>
								</tfoot>
							</table>
						</div>
						<div id="monthly-breakdown-tab-section" class="summary-tab hidden">
							<p>Monthly Usage Breakdown for: <span class='current-interval imp-text'></span></p>
							<p>Filter data by User or Device:&nbsp;
								<select name="MonthlyBreak" id="mb-filter">
									<option value="ALL" selected>ALL Traffic By Day</option>
								</select>
							</p>
							<p>Click any date in the table below to see the usage breakdown by user/device for that date.</p>
							<table id='monthly-breakdown-table'>
								<thead id="MonthlyBreakdownHeader" class='centerAlign'>
									<tr>
										<th rowspan=3 class='br'>Date</th>
										<th colspan=4 class='br2'>Router (units as indicated)</th>
										<th colspan=6 class='isp br2'><span class='isp-name'></span> (all units in MB) <a class='isp-url' href='' target='_blank'>Link</a></th>
										<th colspan=6 class='is_td br2'>Traff daemon</th>
									</tr>
									<tr>
										<th colspan=4 class='br2'>Details</th>
										<th colspan=4 class='isp br2'>Details</th>
										<th colspan=2 class='isp br2'>Difference</th>
										<th colspan=4 class='is_td br2'>Details</th>
										<th colspan=2 class='is_td br2'>Difference</th>
									</tr>
									<tr>
										<th>Down</th>
										<th class='br'>Up</th>
										<th class='br'>Total</th>
										<th class='br2'>Agg.</th>
										<th class='isp'>Down</th>
										<th class='isp br'>Up</th>
										<th class='isp br'>Total</th>
										<th class='isp br2'>Agg.</th>
										<th class='isp br'>Daily</th>
										<th class='isp br2'>Agg.</th>
										<th class='is_td'>Down</th>
										<th class='is_td br'>Up</th>
										<th class='is_td br'>Total</th>
										<th class='is_td br2'>Agg.</th>
										<th class='is_td br'>Daily</th>
										<th class='is_td br2'>Agg.</th>
									</tr>
								</thead>
								<tbody id="MonthlyBreakdown"></tbody>
								<tfoot id="breakdownFooter"></tfoot>
							</table>
							<ul class='notes clearfix'><b>Notes:</b><li class='correction-note hidden'>All dates denoted by <span class='corrected'></span> have had a correction factor added.  Hover over the date to see more info.  Click the date to see the detailed information for that  day.</li>
							<li class='isp-billing-note'>If the days listed in this table do not match your ISP billing cycle, make sure you've properly specified the reset date parameter in your configuration file (by default `config.file` and also on the Settings tab above.</li>
							</ul>
							<h1>Graphs</h1>
							<div id="RouterGraph" class="graphObject"></div>
							<div id="ISPGraph" class="graphObject isp"></div>
							<p>&nbsp;</p>
							<div id="ISPDelta" class="graphObject isp"></div>
							<div id="CummulativeGraph" class="graphObject isp"></div>
							<p class='isp'>The <b>Differences</b> graph highlights days on which there is a difference between the traffic as measured by the router and recorded for the ISP.  A <b style='color:blue'>blue</b> bar above the horizontal axis indicates the amount by which the ISP total exceeded that measured at the router; and vice versa for a <b style='color:green'>green</b> bar below.  The <b style='color:red'>red</b> line shows the accummuated difference between the two values.</p>
						</div>
						<div id="devices-tab-section" class="summary-tab hidden">
							<p>Monthly Usage by User/Device for: <span class='current-interval imp-text'></span></p>
							 <table id='devices-table'>
								<thead id="devicesHeader" class='centerAlign'>
									<tr>
										<th>User</th><th>Device Name</th><th>IP Address</th><th>Mac Address</th><th class='br'>Total</th><th class='br'>Percent</th>
									</tr>
								</thead>
								<tbody id="devicesData"></tbody>
							</table>
						</div>
					</div>
				</div>
				<div class='loading hidden'><h1>Loading view...</h1></div>
				<p class='footer'>Enjoy!</p>
			</div>
		</div>
	</body>
</html>